<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>用户注册</p>
        </header>
        <!-- 表单部分 -->
        <ul class="form-box">
            <li>
                <div class="title">
                    手机号码：
                </div>
                <div class="content">
                    <input type="text" @blur="checkUserId" v-model="user.userId" placeholder="手机号码">
                </div>
            </li>
            <li>
                <div class="title">
                    密码：
                </div>
                <div class="content">
                    <input type="password" v-model="user.password" placeholder="密码">
                </div>
            </li>
            <li>
                <div class="title">
                    确认密码：
                </div>
                <div class="content">
                    <input type="password" v-model="confirmPassword" placeholder="确认密码">
                </div>
            </li>
            <li>
                <div class="title">
                    用户名称：
                </div>
                <div class="content">
                    <input type="text" v-model="user.userName" placeholder="用户名称">
                </div>
            </li>
            <!--			<li>-->
            <!--							<div class="title">-->
            <!--								性别：-->
            <!--							</div>-->
            <!--							<div class="content" style="font-size: 3vw;">-->
            <!--								<input type="radio" v-model="user.userSex" value="1" style="width:6vw;height: 3.2vw;">男-->
            <!--								<input type="radio" v-model="user.userSex" value="0" style="width:6vw;height: 3.2vw;">女-->
            <!--							</div>-->
            <!--						</li>-->
            <li>
                <div class="title">
                    头像：
                    <br/>
                </div>
                <span class="content" style="font-size: 3vw;width: 20px;display: flex">
                    <SingleImage
                            style="width:30%"
                            v-bind:limit="1"
                            listType="picture"
                            ref="singleimg"
                            :showFileList=false
                            @uploadSuccess="uploadSuccess"

                    />
                    <el-avatar :src="picture"></el-avatar>
                    <!--                   -->
                </span>
            </li>
            <li>

            </li>
        </ul>

        <div class="button-login">
            <button @click="register">注册</button>
        </div>

        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>

<script>
    import Footer from '../components/Footer.vue';
    import SingleImage from '../components/SingleImage';

    export default {
        name: 'Register',

        data() {
            return {
                user: {
                    userId: '',
                    password: '',
                    userName: '',
                    userSex: 1,
                },
                picture: "",
                confirmPassword: ''
            }
        },

        methods: {
            uploadSuccess(pic) {
                this.picture = pic[0];
            },
            async checkUserId() {
                // this.$axios.post('UserController/getUserById', this.$qs.stringify({
                //     userId: this.user.userId,
                // })).then(response => {
                //     if (response.data == 1) {
                //         this.user.userId = '';
                //         alert('此手机号码已存在！')
                //     }
                // }).catch(error => {
                //     console.error(error);
                // });
                let url = "/user/" + this.user.userId
                const res = await this.$ajax_(url, null, 'get')
                // console.log(res)
                if (res.status === 500) {
                    this.$alert_res(res, this)
                }
            },
            async register() {
                if (this.user.userId == '') {
                    this.$alert_msg('手机号码不能为空！');
                    return;
                }
                if (this.user.password == '') {
                    this.$alert_msg('密码不能为空！');
                    // alert('密码不能为空！');
                    return;
                }
                if (this.user.password != this.confirmPassword) {
                    this.$alert_msg('两次输入的密码不一致！');
                    return;
                }
                if (this.user.userName == '') {
                    this.$alert_msg('用户名不能为空！');
                    return;
                }
                let url = "/user/register"
                let data = {
                    phone: this.user.userId,
                    password: this.user.password,
                    username: this.user.userName,
                    picture: this.picture
                }
                const res = await this.$ajax_(url, data, 'post')
                //弹出请求信息 -> 成功或者是失败
                this.$alert_res(res)
                if (res.status === 200) {
                    this.$router.push("login");
                }
                //注册请求
                // this.$axios.post('UserController/saveUser', this.$qs.stringify(
                //     this.user
                // )).then(response => {
                //     if (response.data > 0) {
                //         alert('注册成功！');
                //         this.$router.go("login");
                //     } else {
                //         alert('注册失败！');
                //     }
                // }).catch(error => {
                //     console.error(error);
                // });
            }
        },
        components: {
            Footer,
            SingleImage
        }
    }
</script>

<style scoped>
    /****************** 总容器 ******************/
    .wrapper {
        width: 100%;
        height: 100%;
    }

    /****************** header部分 ******************/
    .wrapper header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 4.8vw;

        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    /****************** 表单部分 ******************/
    .wrapper .form-box {
        width: 100%;
        margin-top: 12vw;
    }

    .wrapper .form-box li {
        box-sizing: border-box;
        padding: 4vw 3vw 0 3vw;
        display: flex;
        align-items: center;
    }

    .wrapper .form-box li .title {
        flex: 0 0 18vw;
        font-size: 3vw;
        font-weight: 700;
        color: #666;
    }

    .wrapper .form-box li .content {
        flex: 1;
    }

    .wrapper .form-box li .content input {
        border: none;
        outline: none;
        width: 100%;
        height: 4vw;
        font-size: 3vw;
    }

    .wrapper .button-login {
        width: 100%;
        box-sizing: border-box;
        padding: 4vw 3vw 0 3vw;
    }

    .wrapper .button-login button {
        width: 100%;
        height: 10vw;
        font-size: 3.8vw;
        font-weight: 700;
        color: #fff;
        background-color: #38CA73;
        border-radius: 4px;

        border: none;
        outline: none;
    }

    .wrapper .button-register {
        width: 100%;
        box-sizing: border-box;
        padding: 4vw 3vw 0 3vw;
    }

    .wrapper .button-register button {
        width: 100%;
        height: 10vw;
        font-size: 3.8vw;
        font-weight: 700;
        color: #666;
        background-color: #EEE;
        border-radius: 4px;
        border: none;
        outline: none;
        border: solid 1px #DDD;
    }
</style>
